<template>
  <el-dialog v-bind="$attrs" @close="handleClose" v-on="$listeners" width="1000px">
    <div class="m-center w-10/12">
      <el-form
        label-width="160px"
        size="small"
        :model="form"
        ref="form"
        :rules="rules"
        v-loading="loading"
      >
        <el-form-item
          :label="$t('system_menu.level_name')"
          prop="levelname"
          style="margin-bottom: 20px"
        >
          <el-input
            :disabled="true"
            maxlength="64"
            show-word-limit
            v-model="form.level_name"
            @blur="() => (form.level_name = form.level_name.trim())"
            :placeholder="$t('system_menu.level_name')"
          ></el-input>
        </el-form-item>

        <el-form-item
          :label="$t('system_menu.level_code')"
          prop="level_code"
          style="margin-bottom: 20px"
        >
          <el-input
            :disabled="true"
            maxlength="32"
            show-word-limit
            v-model="form.level_code"
            @blur="() => (form.level_code = form.level_code.trim())"
            :placeholder="$t('system_menu.level_code')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('common.characterCode')"
          prop="characterCode"
          style="margin-bottom: 20px"
        >
          <el-input
            :disabled="true"
            maxlength="32"
            show-word-limit
            v-model="form.characterCode"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('system_menu.level_rank')"
          prop="mobile"
          style="margin-bottom: 20px"
        >
      <div class="flex justify-between">
        <div style="width:50%;">
          <p class="treeTitle">{{$t('system_menu.system_menu')}}:</p>        
          <el-tree
          ref="tree"
          v-model="node"
          node-key="menuId"
          show-checkbox
          :data="treeData"
          :props="defaultProps"
          :default-checked-keys="defaultKeys"
        >
        <template v-slot="{ node, data }">
          <div class="custom-tree-node" >
            <span class="label">{{
              data.list
                ? $t('menu.operator.M_' + data.menuId)
                : $t('menu.operator.' + node.label)
            }}</span>
          </div>
        </template>
        </el-tree>
        </div>
        <div style="width:50%;">
          <p class="treeTitle">{{$t('system_menu.open_capability')}}:</p>        
          <el-tree
          ref="openTree"
          v-model="node"
          node-key="menuId"
          show-checkbox
          :data="openTreeData"
          :props="defaultProps"
          :default-checked-keys="defaultKeys"
        >
        <template v-slot="{ node, data }">
          <div class="custom-tree-node">
            <span class="label">{{
              data.list
                ? $t('menu.operator.M_' + data.menuId)
                : $t('menu.operator.' + node.label)
            }}</span>
          </div>
        </template>
        </el-tree>
        </div>
        </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
    <span class="dialog-footer">
      <el-button size="small" @click="handleClose">{{
        $t('common.cancel')
      }}</el-button>
      <el-button
        size="small"
        type="primary"
        :loading="confirmLoading"
        @click="editRank()"
        >{{ $t('common.confirm') }}</el-button
      >
    </span>
  </template>
  </el-dialog>
</template>

<script>
import { menuDataTranslate2 } from '@/utils'
import { getLevelInfo, getFunctionList, editFunction } from '@/api/system-menu'
import {
  getOperatorMenuList,
  getOperatorMenuFunctionList
} from '@/api/operator'
// let functions
// let tree
export default {
  props: ['level_id'],
  data() {
    return {
      node:[],
      confirmLoading: false,
      usernameDisabled: false,
      form: {
        characterLevelId: '',
        level_code: '',
        level_name: '',
        level_desc: '',
        characterCode:'',
        node: []
      },
      treeData: [], //存储菜单树的数据
      openTreeData: [], //存储开放能力的数据
      ramTreeData: [],
      defaultProps: {
        children: 'list',
        label: 'menuTitle'
      },
      dataForm: {
        node: [],
        roleName: '',
        roleFunctionList: []
      },
      loading: false,
      rules: {}
    }
  },
  computed: {},
  mounted() {
    this.getRankInfo('TOMS')
    this.getRankInfo('RAM')
  },
  methods: {
    getRankInfo(platCode) {
      let params = {
        characterCode: 'OPERATOR',
        platCode: platCode
      }
      getOperatorMenuFunctionList(params).then((res) => {
        let functions = res //获取功能权限
        this.loading = true
        getOperatorMenuList(params)
          .then((data) => {
            this.loading = false
            let plateMenu = data.filter((item) => {
              return item.platCode === platCode
            })
            if (params.platCode == 'RAM') {
              this.openTreeData  = menuDataTranslate2(
                plateMenu,
                'menuId',
                'parentMenuId'
              )
              this.initMenuFunctionTree(this.openTreeData, functions)
            } else if (params.platCode == 'TOMS') {
              this.treeData  = menuDataTranslate2(
                plateMenu,
                'menuId',
                'parentMenuId'
              )
              this.initMenuFunctionTree(this.treeData, functions)
            }
            
          })
          .catch((e) => {
            this.loading = false
            this.$confirmError(e)
          })
      })
    },
    // 获取信息
    getInfo(id) {
      getLevelInfo(id)
        .then((res) => {
          console.log(res)
          this.form.level_code = res.levelCode
          this.form.level_name = res.levelName
          this.form.characterCode = res.characterCode
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    // 初始化
    init(id, code) {
      this.form.characterLevelId = id
      this.form.level_code = code
      this.getInfo(id)
      this.getFunctionInfo(code)
    },
    // 关闭对话框
    handleClose() {
      this.$emit('close')
    },
    //确定编辑权限
    editRank() {
      //   this.$refs['form'].validate((valid) => {
      //     if (valid) {
      let checkTemp = []
      let checkedNodes = this.$refs.tree
        .getCheckedNodes()
        .filter((node) => !node.list)
        .map((node) => ({ menuFuncCode: node.menuId }))
      let checkedOpenNodes = this.$refs.openTree
        .getCheckedNodes()
        .filter((node) => !node.list)
        .map((node) => ({ menuFuncCode: node.menuId }))
      for (let i = 0; i < checkedNodes.length; i++) {
        checkTemp.push(checkedNodes[i].menuFuncCode)
      }
       for (let i = 0; i < checkedOpenNodes.length; i++) {
        checkTemp.push(checkedOpenNodes[i].menuFuncCode)
      }
      console.log('checkTemp',checkTemp)
      let data = {
        characterCode: 'OPERATOR',
        levelCode: this.form.level_code,
        menuFuncCodeList: checkTemp
      }
      editFunction(data)
        .then((res) => {
          console.log(res)
          this.handleClose()
        })
        .catch((err) => {
          this.$confirmError(err)
        })
      // }
      //   })
    },
    /**
     * 将功能权限当作菜单加入菜单的Tree中
     * @param menuList
     * @param functionList 功能列表
     */
    initMenuFunctionTree(menuList, functionList) {
      for (let menu of menuList) {
        if (menu.list && menu.list.length > 0) {
          this.initMenuFunctionTree(menu.list, functionList)
        } else {
          for (let fun of functionList) {
            if (menu.menuId === fun.menuId) {
              if (menu.list === undefined) {
                menu.list = []
              }
              var newObj = {
                menuId: fun.menuFuncCode,
                menuTitle: fun.funName
              }
              menu.list.push(newObj)
            }
          }
        }
      }
    },
    //获取权限
    getFunctionInfo(code) {
      let params = {
        characterCode: 'OPERATOR',
        levelCode: code
      }
      getFunctionList(params)
        .then((res) => {
          const checkedArray = res.map((v) => v.menuFuncCode)
          this.$refs.tree.setCheckedKeys(checkedArray)
          this.$refs.openTree.setCheckedKeys(checkedArray)
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-checkbox__label {
  vertical-align: middle;
  white-space: pre-line;
}
.treeTitle{
font-weight:500;
font-size:14px;
text-indent: 8px;
line-height: 32px;
}
</style>
